<template>
	<div class="member">
		<div class="member__input">
			<el-input :placeholder="placeholder" v-model="inputVal" class="el-input--radius" prefix-icon="el-icon-search" size="medium" readonly-ui="readonly" />
		</div>
		<div class="member__line">
		</div>
		<RecycleScroller class="scroller el-select-dropdown__list" :items="dataFilter" :item-size="36" :key-field="defaultProps.id">
			<template v-slot="{ item }">
				<li class="el-select-dropdown__item" @click="nodeClick(item)" :class="{ selected: showCheckbox? value && value.includes(item[defaultProps.id]):value===item[defaultProps.id], 'is-disabled': item.disabled }">
					<el-tooltip effect="dark" :content="item[defaultProps.name]" placement="top">
						<memberLabel :item="item" :disableClose='true' style="max-width:100px">
							{{item[defaultProps.name]}}
						</memberLabel>
					</el-tooltip>

				</li>
			</template>
		</RecycleScroller>
	</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { RecycleScroller } from 'vue-virtual-scroller';
import memberLabel from './memberLabel.vue';
@Component({
  name: 'memberSelect',
  components: {
    RecycleScroller,
    memberLabel
  }
})
export default class extends Vue {
  @Prop() public value!: any;
  @Prop({ default: '请输入内容' }) public placeholder!: string;
  @Prop(Boolean) public showCheckbox!: any;
  @Prop(Array) public data!: any[];
  @Prop({ default: () => ({ id: '_id', name: 'name' }) }) public defaultProps!: any;
  private inputVal = '';
  private get dataFilter () {
    if (!this.inputVal) {
      return this.data;
    }
    return this.data.filter((item) => {
      const name = item[this.defaultProps.name];
      return name.includes(this.inputVal);
    });
  }

  private nodeClick (item) {
    if (item.disabled) {
      return false;
    }
    const id = item[this.defaultProps.id];
    if (this.showCheckbox) {
      const arr = [...this.value];
      const index = arr.indexOf(id);
      if (index !== -1) {
        arr.splice(index, 1);
      } else {
        arr.push(id);
      }
      this.$emit('handleCheckChange', arr);
    } else {
      this.$emit('handleClickNode', id);
    }
  }
}
</script>
<style lang="stylus" scoped>
.member {
	position relative
	padding 12px 0
	.member__line {
		width 100%
		height 1px
		background #000000
		opacity 0.05
		position absolute
		top 58px
	}
	.member__input {
		padding 0 12px 15px 12px
	}
	.scroller {
		height 280px
		margin-top 5px
		/deep/.hover {
			background-color #f5f5f5
		}
		.input {
			margin-bottom 15px
		}
		.item {
			display block
			line-height 32px
			padding 0 10px
			white-space nowrap
		}
		.select-line {
			border-bottom 1px solid #f0f0f0
		}
	}
	.el-select-dropdown__item {
		padding 0 12px
		height 40px
		line-height 40px
	}
}
</style>
